<template>
	<div class="nav">
		<fade-animation>
			<div class="Backlayer" v-if="showCartview" @click="handleShowCartview"></div>
		</fade-animation>
		<cart-up>
			<div class="nav-cartview" v-if="showCartview">
				<div class="nav-cartview-tips" v-if="accounts.number">{{accounts.tips}}</div>
				<div class="nav-cartview-header">
					<p class="nav-cartview-header-text">已选{{accounts.number}}个商品</p>
					<p class="nav-cartview-header-remove" @click="handleRemoveClick">清空</p>
				</div>
				<ul class="nav-cartview-list">
					<li v-for="(item,index) in newProducts" v-if="item.number" :key="item.id">
						<h3 class="nav-cartview-list-name">{{item.title}}</h3>
						<span class="nav-cartview-list-Original" v-if="item.isOriginPrice">¥{{item.originPrice}}</span>
						<span class="nav-cartview-list-price">{{item.count}}</span>
						<span class="detail-food-cart">
							<img
								class="add"
								@click.stop.self="handleAddClick(item.id)"
								src="http://kxm.pub/shop/images/add.png"
								alt
							/>
							<p class="number">{{item.number}}</p>
							<img
								class="sub"
								@click.stop.self="handleSubClick(item.id)"
								src="http://kxm.pub/shop/images/sub.png"
								alt
							/>
						</span>
					</li>
					<li>
						<span class="nav-cartview-list-name">餐盒</span>
						<span class="nav-cartview-list-foodPrice">{{rst.foodBox}}</span>
					</li>
				</ul>
			</div>
		</cart-up>
		<div class="nav-wrap" @click="handleShowCartview">
			<div class="nav-left">
				<div class="nav-left-cart">
					<img
						v-if="accounts.number"
						class="nav-left-cart-img"
						src="http://kxm.pub/shop/images/cart-active.png"
						alt
					/>
					<img v-else class="nav-left-cart-img" src="http://kxm.pub/shop/images/cart-empty.png" alt />
					<scale-animation>
						<p class="nav-left-cart-tips" v-if="accounts.number">{{accounts.number}}</p>
					</scale-animation>
				</div>
				<div class="nav-left-cart-info">
					<p
						v-if="accounts.number"
						class="nav-left-cart-info-totalOriginal isOriginal"
					>¥{{(accounts.total).toFixed(1)}}</p>
					<p v-else class="nav-left-cart-info-totalOriginal">未选购商品</p>
					<p class="nav-left-cart-info-delivery">另需配送费9元</p>
				</div>
			</div>
			<div class="nav-right">
				<div v-if="accounts.number" class="nav-right-accounts-active">去结算</div>
				<div v-else class="nav-right-accounts-empty">¥0起送</div>
			</div>
		</div>
	</div>
</template>

<script>
	import CartUp from "../animation/CartUp";
	import FadeAnimation from "../animation/Fade";
	import ScaleAnimation from "../animation/Scale";

	export default {
		name: "BottomNav",
		props: ["rst", "accounts", "newProducts", "layerClose"],
		data() {
			return {
				showCartview: false
			};
		},
		watch: {
			layerClose: function() {
				this.showCartview = this.layerClose;
			}
		},
		methods: {
			handleAddClick(id) {
				this.$store.commit("addNumber", id);
			},
			handleSubClick(id) {
				this.$store.commit("subNumber", id);
			},
			handleRemoveClick() {
				this.$store.commit("RemoveCart");
			},
			handleShowCartview() {
				this.showCartview = !this.showCartview;
			}
		},
		components: {
			CartUp,
			FadeAnimation,
			ScaleAnimation
		}
	};
</script>

<style scoped>
	.Backlayer {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: -1;
	}
	.nav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.nav-cartview {
		position: fixed;
		bottom: 13.8vw;
		left: 0;
		right: 0;
		background: #fff;
		z-index: -1;
	}
	.nav-cartview-tips {
		height: 7vw;
		line-height: 7vw;
		font-size: 3.5vw;
		color: #333;
		background: rgba(248, 242, 208, 1);
		border: 1px solid #efe7c0;
	}
	.nav-cartview-header {
		height: 11.5vw;
		line-height: 11.5vw;
		background: #fff;
		padding-top: 1vw;
	}
	.nav-cartview-header-text {
		float: left;
		font-size: 4.6vw;
		margin-left: 4.3vw;
		color: #999;
	}
	.nav-cartview-header-remove {
		float: right;
		font-size: 4vw;
		margin-right: 4.3vw;
		color: #999;
	}
	.nav-cartview-list {
		overflow: auto;
		background: #f8f8f8;
		padding: 2vw 4.3vw 6vw 4.3vw;
	}
	.nav-cartview ul li {
		height: 12.6vw;
		line-height: 12.6vw;
		overflow: auto;
	}
	.nav-cartview-list-name {
		float: left;
		width: 43vw;
		font-size: 4.8vw;
		text-align: left;
		color: #000000;
		font-weight: bold;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.nav-cartview-list-Original {
		position: absolute;
		right: 46vw;
		margin-top: 0.5vw;
		font-size: 3.2vw;
		text-decoration: line-through;
		margin-left: -21vw;
		color: #aaa;
	}
	.nav-cartview-list-price {
		position: absolute;
		right: 32vw;
		color: rgb(255, 83, 57);
		font-size: 5vw;
	}
	.nav-cartview-list-price:before {
		content: "¥";
		font-size: 3vw;
	}
	.nav-cartview-list-foodPrice {
		color: rgb(255, 83, 57);
		margin-left: -12vw;
		font-size: 5vw;
	}
	.nav-cartview-list-foodPrice:before {
		content: "¥";
		font-size: 3vw;
	}

	.detail-food-cart {
		position: absolute;
		margin-top: 0.3vw;
		width: 30vw;
		height: 7vw;
		right: 4vw;
	}
	.detail-food-cart .sub {
		float: right;
		right: 17vw;
		margin-top: 3vw;
		margin-right: 1.3vw;
	}
	.detail-food-cart .number {
		float: right;
		width: 6vw;
		text-align: center;
		margin-right: 1.3vw;
		font-size: 5vw;
	}
	.detail-food-cart .add {
		float: right;
		margin-top: 3vw;
	}
	.detail-food-cart img {
		width: 6.1vw;
	}

	.nav-wrap {
		height: 13.8vw;
		background: rgba(60, 60, 60, 0.98);
	}
	.nav-left {
		float: left;
		overflow: auto;
	}
	.nav-left-cart {
		position: absolute;
		left: 4vw;
		bottom: 1vw;
	}
	.nav-left-cart-img {
		width: 16vw;
	}
	.nav-left-cart-tips {
		position: absolute;
		padding: 0.06vw 1.6vw 0.03vw 1.6vw;
		border-radius: 3vw;
		line-height: 5.3vw;
		font-size: 3.5vw;
		color: #fff;
		background-image: linear-gradient(to right, #fc721a, #ff3f16);
		top: 0.2vw;
		right: 0.2vw;
	}
	.nav-left-cart-info {
		float: left;
		margin-left: 23vw;
		margin-top: 1.8vw;
	}
	.nav-left-cart-info-totalOriginal {
		text-align: left;
		height: 4.5vw;
		font-size: 3.9vw;
		color: #777;
	}
	.nav-left-cart-info-delivery {
		text-align: left;
		font-size: 3.1vw;
		color: #777;
	}
	.nav-right {
		float: right;
		width: 29vw;
		height: 13.8vw;
		line-height: 13.8vw;
		background: rgba(162, 162, 162, 0.3);
	}
	.nav-right-accounts-empty {
		color: #a9a9ab;
		height: 13.8vw;
		font-family: "microsoft yahei";
		font-weight: bold;
	}
	.nav-right-accounts-active {
		background: #52ca71;
		height: 13.8vw;
		line-height: 15vw;
		font-size: 5vw;
		color: #fff;
		font-weight: bold;
		letter-spacing: 0.2vw;
	}
	.isOriginal {
		color: #fff;
		font-size: 6vw;
		height: 5.3vw;
	}
</style>
